<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <canvas width="100" height="100" style="border: 1px solid black"></canvas>
  <!-- <button>已结束，重新开始？</button> -->
  <script>
    function BonusList() {
      this.foodPos = [];
      // this.getBonus();
      this.getBonus = function getBonus() {
        // console.log(this.foodPos);
        if (this.foodPos.length >= 20) {
          return;
        } else {
          for (let i = this.foodPos.length; i < 20; i++) {
            let x = Math.floor(Math.random() * 100 + 1);
            let y = Math.floor(Math.random() * 100 + 1);
            this.foodPos.push([x, y]);
          }
        }
      };
      this.getBonus();
    }
    // const b = new BonusList();
    // b.getBonus();
    function Snake() {
      let list = [[50, 50]];
      let direction = [-1, 0];

      for (let i = 1; i < 4; i++) {
        list.push([50 + i, 50]);
      }

      this.changeDirection = function changeDirection(direction) {
        if ((list[0] = list[1])) {
          return;
        } else {
          direction = direction;
          return direction;
        }
      };

      this.move = function move() {
        if (direction) {
          let head = [...list[0]];
          let newList = [head];

          head[0] += direction[0];
          head[1] += direction[1];

          for (let i = 1; i < list.length; i++) {
            newList[i] = [];
            newList[i][0] = list[i - 1][0];
            newList[i][1] = list[i - 1][1];
          }
          list = newList;
        }
        return list;
      };
    }
    // Snake();

    function Game() {
      const canvas = document.querySelector("canvas");
      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "#0000ff";
      const snake = new Snake();
      const bonusList = new BonusList();
      // console.log(bonusList);
      // console.log(bonusList.foodPos);

      this.handleKey = function handleKey() {
        window.addEventListener("keydown", function (e) {
          switch (e.key) {
            case "ArrowLeft":
              snake.changeDirection([-1, 0]);
              break;
            case "ArrowUp":
              snake.changeDirection([0, -1]);
              break;
            case "ArrowRight":
              snake.changeDirection([1, 0]);
              break;
            case "ArrowDown":
              snake.changeDirection([0, 1]);
              break;
          }
        });
        // handleKey();

      }

      // console.log(bonusList);


      this.trigger = function trigger() {
        ctx.clearRect(0, 0, 100, 100);
        console.log(bonusList);
        for (let item of bonusList.foodPos) {
          console.log(item);
          ctx.fillRect(item[0], item[1], 1, 1);
        }
        for (let item of snake.move()) {
          ctx.fillRect(item[0], item[1], 1, 1);
        }

        snake.move();
        console.log(bonusList);
        // for (let key in this.bonusList.getBonus()) {
        //   if (
        //     bonusList.getBonus()[key][0] === snake.list[0][0] &&
        //     bonusList.getBonus()[key][1] === snake.list[0][1]
        //   ) {
        //     snake.list.push([
        //       bonusList.getBonus()[key][0],
        //       bonusList.getBonus()[key][1],
        //     ]);
        //     bonusList.getBonus().splice(key, 1);
        //   }
        // }
        if (
          snake.move()[0][0] === 0 ||
          snake.move()[0][1] === 0 ||
          snake.move()[0][0] === 100 ||
          snake.move()[0][1] === 100
        ) {
          alert("游戏结束");
        }
        bonusList;
      }
      setInterval(this.trigger(), 1000);

      this.trigger();
    }

    const game = new Game();
    // console.log(game);
  </script>
</body>

</html>